<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css" />
  </head>
  <style>
    main {
      width: 800px;
      height: 40px;
      margin: auto;
      border: 1px #000 solid;
      display: flex;
      justify-content: space-between;
    }

    div {
      flex: 1;
      border-right: 1px dashed #000;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .pic {
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
    }
    .pic0 {
      background-image: url(../day9/img/959f988240d89feae0e589b9d6f95f6.png);
      background-position: 2px -65px;
    }
    div:hover .pic0 {
      transition: all;
      background-position: 2px -103px;
      transition: all 0.5s;
    }
    div:hover .word {
      color: #3faf0f;
    }

    .pic1 {
      background-image: url(../day9/img/959f988240d89feae0e589b9d6f95f6.png);
      background-position: 2px -143px;
      transition: all;
    }
    div:hover .pic1 {
      transition: all;
      background-position: 2px -182px;
      transition: all 0.5s;
    }

    .pic2 {
      background-image: url(../day9/img/959f988240d89feae0e589b9d6f95f6.png);
      background-position: 2px -222px;
      transition: all;
    }
    div:hover .pic2 {
      transition: all;
      background-position: 2px -263px;
      transition: all 0.5s;
    }

    .pic3 {
      background-image: url(../day9/img/959f988240d89feae0e589b9d6f95f6.png);
      background-position: 2px -305px;
      transition: all;
    }
    div:hover .pic3 {
      transition: all;
      background-position: 2px -345px;
      transition: all 0.5s;
    }

    .pic4 {
      background-image: url(../day9/img/959f988240d89feae0e589b9d6f95f6.png);
      background-position: 2px -385px;
      transition: all;
    }
    div:hover .pic4 {
      transition: all;
      background-position: 2px -425px;
      transition: all 0.5s;
    }

    .pic5 {
      background-image: url(../day9/img/959f988240d89feae0e589b9d6f95f6.png);
      background-position: 2px -465px;
      transition: all;
    }
    div:hover .pic5 {
      transition: all;
      background-position: 2px -505px;
      transition: all 0.5s;
    }

    .pic6 {
      background-image: url(../day9/img/959f988240d89feae0e589b9d6f95f6.png);
      background-position: 2px -539px;
      transition: all;
    }
    div:hover .pic6 {
      transition: all;
      background-position: 2px -575px;
      transition: all 0.5s;
    }

    .pic7 {
      background-image: url(../day9/img/959f988240d89feae0e589b9d6f95f6.png);
      background-position: 2px -613px;
      transition: all;
    }
    div:hover .pic7 {
      transition: all;
      background-position: 2px -653px;
      transition: all 0.5s;
    }

    .pic8 {
      background-image: url(../day9/img/959f988240d89feae0e589b9d6f95f6.png);
      background-position: 2px -693px;
      transition: all;
    }
    div:hover .pic8 {
      transition: all;
      background-position: 2px -732px;
      transition: all 0.5s;
    }

    .pic9 {
      background-image: url(../day9/img/959f988240d89feae0e589b9d6f95f6.png);
      background-position: 2px -772px;
      transition: all;
    }
    div:hover .pic9 {
      transition: all;
      background-position: 2px -812px;
      transition: all 0.5s;
    }

    .word {
      margin-right: 10px;
    }
  </style>
  <body>
    <main>
      <div>
        <span class="pic pic0"></span><span class="word">我的主页</span>
      </div>
      <div>
        <span class="pic pic1"></span><span class="word">我的主页</span>
      </div>
      <div>
        <span class="pic pic2"></span><span class="word">新闻头条</span>
      </div>
      <div>
        <span class="pic pic3"></span><span class="word">我的主页</span>
      </div>
      <div>
        <span class="pic pic4"></span><span class="word">我的主页</span>
      </div>
      <div>
        <span class="pic pic5"></span><span class="word">我的主页</span>
      </div>
      <div>
        <span class="pic pic6"></span><span class="word">我的主页</span>
      </div>
      <div>
        <span class="pic pic7"></span><span class="word">我的主页</span>
      </div>
      <div>
        <span class="pic pic8"></span><span class="word">我的主页</span>
      </div>
      <div>
        <span class="pic pic9"></span><span class="word">我的主页</span>
      </div>
    </main>
  </body>
</html>
